<template>
  <div style="background: #202B61;width: 100%;height: 100%;">
    <!-- 负荷仿真结果展示 -->
    <div style="top: 1%; width: 100%;height: 105vh;float: left;display: inline-flex;">


      <div class="box1">
        
        <!-- <div class = "title">
          <div style="position: relative;left: 0%;line-height: 5vh;"><span style="margin-left: 1vh;">电负荷</span></div>
        </div> -->

        <el-form ref="materialResourceData" :rules="materialResourceRules" label-width="100px"
                   label-suffix=":" align="left"  style="margin-top: 1.5vh;color: #FFFFFF;" :inline="true"
                   :model="materialResourceData">
          <el-form-item label-width="150px" label="频率偏差">
              <el-input style="width: 120px;" v-model="value1">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">Hz</i>
              </el-input>
            </el-form-item>

            <el-form-item label-width="150px" label="感知精度">
              <el-input style="width: 120px;" v-model="value2">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">F.S.</i>
              </el-input>
            </el-form-item>

          </el-form>

        <div id="echartsArea1" style="   width: 75%;margin: auto;height: 55%;margin-top: 10vh;"></div>
      </div>


      <div class="box2">
        
        <!-- <div class = "title">
          <div style="position: relative;left: 0%;line-height: 5vh;"><span style="margin-left: 1vh;">冷负荷</span></div>
        </div> -->

        
        <el-form ref="materialResourceData" :rules="materialResourceRules" label-width="100px"
                   label-suffix=":" align="left" style="margin-top: 1.5vh;color: #FFFFFF;" :inline="true"
                   :model="materialResourceData">
          <el-form-item label-width="150px" label="电压偏差">
              <el-input style="width: 120px;" v-model="value3">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">%</i>
              </el-input>
            </el-form-item>

            <el-form-item label-width="150px" label="感知时间">
              <el-input style="width: 120px;" v-model="value4">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">ms</i>
              </el-input>
            </el-form-item>

          </el-form>

        <div id="echartsArea2" style="   width: 75%;margin: auto;height: 55%;margin-top: 10vh;"></div>
      </div>



    </div>


  </div>
</template>

<script type="text/ecmascript-6">

let name = '多能流统一建模误差'
let lineColor = "#5AC2DB"
let areaColor = ['rgba(143, 210, 240, 0.53)', 'rgba(40, 84, 126, 0.14)']
let axisData1 = [0
,0.1
,0.2
,0.3
,0.4
,0.5
,0.6
,0.7
,0.8
,0.9
,1
,1.1
,1.2
,1.3
,1.4
,1.5
,1.6
,1.7
,1.8
,1.9
,2
,2.1
,2.2
,2.3
,2.4
,2.5
,2.6
,2.7
,2.8
,2.9
,3
,3.1
,3.2
,3.3
,3.4
,3.5
,3.6
,3.7
,3.8
,3.9
,4
,4.1
,4.2
,4.3
,4.4
,4.5
,4.6
,4.7
,4.8
,4.9
,5
,5.1
,5.2
,5.3
,5.4
,5.5
,5.6
,5.7
,5.8
,5.9
,6
,6.1
,6.2
,6.3
,6.4
,6.5
,6.6
,6.7
,6.8
,6.9
,7
,7.1
,7.2
,7.3
,7.4
,7.5
,7.6
,7.7
,7.8
,7.9
,8
,8.1
,8.2
,8.3
,8.4
,8.5
,8.6
,8.7
,8.8
,8.9
,9
,9.1
,9.2
,9.3
,9.4
,9.5
,9.6
,9.7
,9.8
,9.9
,10
,10.1
,10.2
,10.3
,10.4
,10.5
,10.6
,10.7
,10.8
,10.9
,11
,11.1
,11.2
,11.3
,11.4
,11.5
,11.6
,11.7
,11.8
,11.9
,12
,12.1
,12.2
,12.3
,12.4
,12.5
,12.6
,12.7
,12.8
,12.9
,13
,13.1
,13.2
,13.3
,13.4
,13.5
,13.6
,13.7
,13.8
,13.9
,14
,14.1
,14.2
,14.3
,14.4
,14.5
,14.6
,14.7
,14.8
,14.9
,15
,15.1
,15.2
,15.3
,15.4
,15.5
,15.6
,15.7
,15.8
,15.9
,16
,16.1
,16.2
,16.3
,16.4
,16.5
,16.6
,16.7
,16.8
,16.9
,17
,17.1
,17.2
,17.3
,17.4
,17.5
,17.6
,17.7
,17.8
,17.9
,18
,18.1
,18.2
,18.3
,18.4
,18.5
,18.6
,18.7
,18.8
,18.9
,19
,19.1
,19.2
,19.3
,19.4
,19.5
,19.6
,19.7
,19.8
,19.9
,20
,20.1
,20.2
,20.3
,20.4
,20.5
,20.6
,20.7
,20.8
,20.9
,21
,21.1
,21.2
,21.3
,21.4
,21.5
,21.6
,21.7
,21.8
,21.9
,22
,22.1
,22.2
,22.3
,22.4
,22.5
,22.6
,22.7
,22.8
,22.9
,23
,23.1
,23.2
,23.3
,23.4
,23.5
,23.6
,23.7
,23.8
,23.9
,24
,24.1
,24.2
,24.3
,24.4
,24.5
,24.6
,24.7
,24.8
,24.9
,25
,25.1
,25.2
,25.3
,25.4
,25.5
,25.6
,25.7
,25.8
,25.9
,26
,26.1
,26.2
,26.3
,26.4
,26.5
,26.6
,26.7
,26.8
,26.9
,27
,27.1
,27.2
,27.3
,27.4
,27.5
,27.6
,27.7
,27.8
,27.9
,28
,28.1
,28.2
,28.3
,28.4
,28.5
,28.6
,28.7
,28.8
,28.9
,29
,29.1
,29.2
,29.3
,29.4
,29.5
,29.6
,29.7
,29.8
,29.9
,30
]

 

let seriesData1 = [
   [314
,313.8
,313.6
,313.4
,313.2
,313
,312.8
,312.6
,312.4
,312.2
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312
,312.2828427
,312.4
,312.4898979
,312.5656854
,312.6324555
,312.6928203
,312.7483315
,312.8
,312.8485281
,312.8944272
,312.9380832
,312.9797959
,313.0198039
,313.0583005
,313.0954451
,313.1313708
,313.1661904
,313.2
,313.2328828
,313.2649111
,313.2961481
,313.3266499
,313.356466
,313.3856406
,313.4142136
,313.4422205
,313.4696938
,313.496663
,313.5231546
,313.5491933
,313.5748016
,313.6
,313.6248077
,313.6492423
,313.6733201
,313.6970563
,313.7204651
,313.7435596
,313.7663522
,313.7888544
,313.811077
,313.8330303
,313.8547237
,313.8761663
,313.8973666
,313.9183326
,313.9390719
,313.9595918
,313.979899
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,313.7494064
,313.6914831
,313.6515773
,313.6201711
,313.5938738
,313.5710414
,313.5507383
,313.5323758
,313.5155569
,313.5
,313.4854971
,313.47189
,313.4590551
,313.4468939
,313.4353265
,313.424287
,313.4137205
,313.4035806
,313.3938277
,313.3844278
,313.3753514
,313.3665727
,313.358069
,313.3498203
,313.3418089
,313.3340187
,313.3264356
,313.3190466
,313.31184
,313.3048054
,313.2979331
,313.2912142
,313.2846408
,313.2782053
,313.271901
,313.2657216
,313.2596612
,313.2537144
,313.2478761
,313.2421417
,313.2421417
,313.2421417
,313.2421417
,313.2421417
,313.2421417
,313.2421417
,313.2421417
,313.2421417
,313.2421417
,313.2421417
,313.2478761
,313.2537144
,313.2596612
,313.2657216
,313.271901
,313.2782053
,313.2846408
,313.2912142
,313.2979331
,313.3048054
,313.31184
,313.3190466
,313.3264356
,313.3340187
,313.3418089
,313.3498203
,313.358069
,313.3665727
,313.3753514
,313.3844278
,313.3938277
,313.4035806
,313.4137205
,313.424287
,313.4353265
,313.4468939
,313.4590551
,313.47189
,313.4854971
,313.5
,313.5155569
,313.5323758
,313.5507383
,313.5710414
,313.5938738
,313.6201711
,313.6515773
,313.6914831
,313.7494064
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314
,314]
]

let axisData2 =  [0.1
,0.2
,0.3
,0.4
,0.5
,0.6
,0.7
,0.8
,0.9
,1
,1.1
,1.2
,1.3
,1.4
,1.5
,1.6
,1.7
,1.8
,1.9
,2
,2.1
,2.2
,2.3
,2.4
,2.5
,2.6
,2.7
,2.8
,2.9
,3
,3.1
,3.2
,3.3
,3.4
,3.5
,3.6
,3.7
,3.8
,3.9
,4
,4.1
,4.2
,4.3
,4.4
,4.5
,4.6
,4.7
,4.8
,4.9
,5
,5.1
,5.2
,5.3
,5.4
,5.5
,5.6
,5.7
,5.8
,5.9
,6
,6.1
,6.2
,6.3
,6.4
,6.5
,6.6
,6.7
,6.8
,6.9
,7
,7.1
,7.2
,7.3
,7.4
,7.5
,7.6
,7.7
,7.8
,7.9
,8
,8.1
,8.2
,8.3
,8.4
,8.5
,8.6
,8.7
,8.8
,8.9
,9
,9.1
,9.2
,9.3
,9.4
,9.5
,9.6
,9.7
,9.8
,9.9
,10
,10.1
,10.2
,10.3
,10.4
,10.5
,10.6
,10.7
,10.8
,10.9
,11
,11.1
,11.2
,11.3
,11.4
,11.5
,11.6
,11.7
,11.8
,11.9
,12
,12.1
,12.2
,12.3
,12.4
,12.5
,12.6
,12.7
,12.8
,12.9
,13
,13.1
,13.2
,13.3
,13.4
,13.5
,13.6
,13.7
,13.8
,13.9
,14
,14.1
,14.2
,14.3
,14.4
,14.5
,14.6
,14.7
,14.8
,14.9
,15
,15.1
,15.2
,15.3
,15.4
,15.5
,15.6
,15.7
,15.8
,15.9
,16
,16.1
,16.2
,16.3
,16.4
,16.5
,16.6
,16.7
,16.8
,16.9
,17
,17.1
,17.2
,17.3
,17.4
,17.5
,17.6
,17.7
,17.8
,17.9
,18
,18.1
,18.2
,18.3
,18.4
,18.5
,18.6
,18.7
,18.8
,18.9
,19
,19.1
,19.2
,19.3
,19.4
,19.5
,19.6
,19.7
,19.8
,19.9
,20
,20.1
,20.2
,20.3
,20.4
,20.5
,20.6
,20.7
,20.8
,20.9
,21
,21.1
,21.2
,21.3
,21.4
,21.5
,21.6
,21.7
,21.8
,21.9
,22
,22.1
,22.2
,22.3
,22.4
,22.5
,22.6
,22.7
,22.8
,22.9
,23
,23.1
,23.2
,23.3
,23.4
,23.5
,23.6
,23.7
,23.8
,23.9
,24
,24.1
,24.2
,24.3
,24.4
,24.5
,24.6
,24.7
,24.8
,24.9
,25
,25.1
,25.2
,25.3
,25.4
,25.5
,25.6
,25.7
,25.8
,25.9
,26
,26.1
,26.2
,26.3
,26.4
,26.5
,26.6
,26.7
,26.8
,26.9
,27
,27.1
,27.2
,27.3
,27.4
,27.5
,27.6
,27.7
,27.8
,27.9
,28
,28.1
,28.2
,28.3
,28.4
,28.5
,28.6
,28.7
,28.8
,28.9
,29
,29.1
,29.2
,29.3
,29.4
,29.5
,29.6
,29.7
,29.8
,29.9
,30
]

// axisData2 = [];

// for(var i = 0;i<=30;i++){
//    axisData2.push(i);
// }
 



let seriesData2 = [
[376.4916894
,375.680763
,375.1220829
,374.6823954
,374.3142332
,373.9945796
,373.7103359
,373.4532609
,373.2177969
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,373
,374.2780193
,374.8073922
,375.2135944
,375.5560386
,375.857738
,376.1304952
,376.3813212
,376.6147845
,376.8340579
,377.0414519
,377.2387105
,377.4271887
,377.6079641
,377.7819104
,377.9497475
,378.1120772
,378.2694086
,378.4221767
,378.570757
,378.7154761
,378.8566202
,378.9944419
,379.1291653
,379.2609903
,379.3900965
,379.5166454
,379.6407831
,379.7626425
,379.8823446
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,378.4964383
,378.1488984
,377.9094641
,377.7210266
,377.5632428
,377.4262484
,377.3044297
,377.1942547
,377.0933415
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377
,377.6708204
,377.9486833
,378.161895
,378.3416408
,378.5
,378.6431677
,378.7748239
,378.8973666
,379.0124612
,379.1213203
,379.2248595
,379.32379
,379.4186773
,379.5099801
,379.5980762
,379.6832816
,379.7658633
,379.8460499
,379.9240383
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380
,380]
]




var option1 = {
   //backgroundColor: '#0F224C', //背景色
   title: {
		text: '角频率',
		textStyle: {
			color: '#FFF',
			fontSize: 20
		},
		top:"2%",
		left: 'center',
// 		right: '5%'
	},
   grid: {
      left : '9%',
      right : '3%',
      bottom : '5%',
      top : '10%',
      containLabel: true
   },
   tooltip: {
      trigger: "axis",
      axisPointer: {
         lineStyle: {
            color: "rgba(255,255,255,0.7)"
         }
      },
      backgroundColor: "rgba(255,255,255,0.1)",
      padding: [5, 10],
      textStyle: {
         color: "rgb(255,255,255)"
      }
   },
   legend: {
      x: "center",
      y: "bottom",
      icon: "circle",
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 60,
      textStyle: {
         color: "#C0C4CC",
         fontSize: 13,
         fontWeight: 'bold',
      },
      data: [""]
   },
   xAxis: {
      type: "category",
      data: axisData1,
      boundaryGap: true,
      splitLine: {
         show: false
      },

      axisTick: {
         show: false
      },
      // type: 'dashed',
      axisLine: {
         lineStyle: {
            type: 'dashed',
            color: "#2557B4"
         }
      },
      axisLabel: {
         margin: 10,
         textStyle: {
            fontSize: 14,
            color: "#C0C4CC"
         }
      }
   },
   yAxis: [
      {
         type: "value",
         position: "left",
         name: '单位：Hz',
         position: "left",
         max:315,
         min:308,
         scale : true,
         nameTextStyle: {
            padding: [0, 80, 0, 0],
            color: '#C0C4CC',
            fontSize: 13,
            fontWeight: 'bold',
            // lineHeight: 40,
         },
         splitLine: {
            show: true,
            lineStyle: {
               type: 'dashed',
               color: "#C0C4CC"
            }
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: "rgba(255,255,255,0.3)"
            }
         },

         axisLabel: {
            show: true,
            margin: 2,
            textStyle: {
               fontSize: 12,
               color: "#DEEBFF"
            }
         }
      }],
   series: [
      {
         name: "数据",
         type: "line", 
         smooth: true,
         showSymbol: false,
         symbol: 'circle',
         // showSymbol: true,
         // symbol: 'circle',
         data: seriesData1[0],
         itemStyle: {
            normal: {
               color: '#287CE8'
            }
         },
         lineStyle: {
            normal: {
               width: 3
            }
         },

         markArea: {
            animation: true,
            itemStyle: { //全局的
                normal: {
                    color: 'rgba(208,208,208,0.3)'
                }
            },
            
            data: [
                [{
                    name: '阶段二',
                    xAxis: "03:00" || "",

                }, {
                    xAxis: "06:00" || "",
                }]
            ]
        }


      },
      
   ]
}




var option2 = {
   //backgroundColor: '#0F224C', //背景色
   title: {
		text: '电压',
		textStyle: {
			color: '#FFF',
			fontSize: 20
		},
		top:"2%",
		left: 'center',
// 		right: '5%'
	},
   grid: {
      left : '9%',
      right : '3%',
      bottom : '5%',
      top : '10%',
      containLabel: true
   },
   tooltip: {
      trigger: "axis",
      axisPointer: {
         lineStyle: {
            color: "rgba(255,255,255,0.7)"
         }
      },
      backgroundColor: "rgba(255,255,255,0.1)",
      padding: [5, 10],
      textStyle: {
         color: "rgb(255,255,255)"
      }
   },
   legend: {
      x: "center",
      y: "bottom",
      icon: "circle",
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 60,
      textStyle: {
         color: "#C0C4CC",
         fontSize: 13,
         fontWeight: 'bold',
      },
      data: [""]
   },
   xAxis: {
      type: "category",
      data: axisData2,
      boundaryGap: true,
      splitLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      // type: 'dashed',
      axisLine: {
         lineStyle: {
            type: 'dashed',
            color: "#2557B4"
         }
      },
      axisLabel: {
         margin: 10,
         textStyle: {
            fontSize: 14,
            color: "#C0C4CC"
         }
      }
   },
   yAxis: [
      {
         type: "value",
         position: "left",
         name: '单位：V',
        // scale : true,
 
         position: "left",
         max:390,
          min:370,
         nameTextStyle: {
            padding: [0, 80, 0, 0],
            color: '#C0C4CC',
            fontSize: 13,
            fontWeight: 'bold',
            // lineHeight: 40,
         },
         splitLine: {
            show: true,
            lineStyle: {
               type: 'dashed',
               color: "#C0C4CC"
            }
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: "rgba(255,255,255,0.3)"
            }
         },

         axisLabel: {
            show: true,
            margin: 2,
            textStyle: {
               fontSize: 12,
               color: "#DEEBFF"
            }
         }
      }],
   series: [
      {
         name: "数据",
         type: "line",
 
         // showSymbol: true,
         // symbol: 'circle',
         data: seriesData2[0],
         itemStyle: {
            normal: {
               color: '#287CE8'
            }
         },
         lineStyle: {
            normal: {
               width: 3
            }
         },


      }
      
   ]
}



  // 引入基本模板,按需加载
  let echarts = require('echarts/lib/echarts');
  var myChart1,myChart2,myChart3;

  export default {
    name: 'simulationResult',
    components: {

    },
    data () {
      return {
        value1:"0.12",
        value2 : "7",
        value3 : "1.4",
        value4 : "2.4"
      }
    },
    mounted (){

    
  

        myChart1 = echarts.init(document.getElementById('echartsArea1'));
  
        myChart2 = echarts.init(document.getElementById('echartsArea2')); 

        myChart1.clear();
        myChart2.clear();


 
      myChart1.setOption(option1);
         myChart2.setOption(option2); 

         window.onresize = function(){
            myChart1.resize();
            myChart2.resize(); 
         }



    },
    methods: {
      cloneObj:function (obj) {
        var newObj = {};
        if (obj instanceof Array) {
          newObj = [];
        }
        for (var key in obj) {
          var val = obj[key];
          //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。
          newObj[key] = typeof val === 'object' ? this.cloneObj(val): val;
        }
        return newObj;
      },


    }
  }


</script>

<style scoped >



  /deep/ .el-dialog, .el-pager li {
    background: #202B61;
    -webkit-box-sizing: border-box;
  }


  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background: #374590;
  }

  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }

  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #4891EE;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }


  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }

  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }


  .box1{ 
    width: 49%;
    height: 78%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;

    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box2{ 
    width: 49%;
    height: 78%;
    margin-left: 2vh;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box3{
    position: relative;
    width: 100%;
    height: 48vh;
    margin-top:0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }




  .title{
    width:100%;
    height:5vh;
    line-height: 5vh;
    background:rgba(55, 69, 144, 1);

    font-weight:bold;
    background: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vh;
    color: #FFFFFF;
    text-align: left;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(55, 69, 144, 1);
    border-radius: 1px;
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.345098039215686);
  }


</style>
